<template>
  <div ref="multipleLineEcharts"></div>
</template>

<script>
import echarts from 'echarts'
import { on, off } from '@/libs/tools'
export default {
  name: 'MultipleLineEcharts',
  props: {
    text: String,
    subtext: String,
    legend: Array,
    xAxisData: '',
    seriesDataArray: Array,
    yUnit: '',
    titleName: ''
  },
  data() {
    return {
      multipleLineEcharts: null
    }
  },
  methods: {
    resize() {
      this.multipleLineEcharts.resize()
    },
    initData() {
      this.$nextTick(() => {
        let legend = this.legend
        let xAxisData = this.xAxisData
        let seriesDataArray = this.seriesDataArray
        let yUnit = this.yUnit
        let titleName = this.titleName
        const option = {
          title: {
            text: this.text,
            subtext: this.subtext
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: legend
          },
          toolbox: {
            show: true,
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              dataView: { readOnly: false },
              magicType: { type: ['line', 'bar'] },
              restore: {},
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xAxisData
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value} ' + (yUnit || '个')
            }
          },
          series: this.initSeriesData(legend, seriesDataArray)
        }
        this.$nextTick(() => {
          this.multipleLineEcharts = echarts.init(this.$refs.multipleLineEcharts)
          this.multipleLineEcharts.setOption(option)
          on(window, 'resize', this.resize)
        })
      })
    },
    initSeriesData(legend, seriesDataArray) {
      let series = []
      if (legend.length > 0) {
        let self = this
        legend.forEach((item, index) => {
          let data = {
            type: 'line',
            markPoint: {
                data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
              },
              markLine: {
                data: [
                  { type: 'average', name: '平均值' },
                  [
                    {
                      symbol: 'none',
                      x: '90%',
                      yAxis: 'max'
                    },
                    {
                      symbol: 'circle',
                      label: {
                        normal: {
                          position: 'start',
                          formatter: '最大值'
                        }
                      },
                      type: 'max',
                      name: '最高点'
                    }
                  ]
                ]
              }
          }
          data.name = item
          data.data = seriesDataArray[index]
          series.push(data)
        })
      }
      return series
    }
  },
  mounted() {
    this.initData()
  },
  beforeDestroy() {
    off(window, 'resize', this.resize)
  }
}
</script>
